<template>
    <div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="套餐名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="套餐分类" prop="categoryId">
          <el-select v-model="ruleForm.categoryId" placeholder="请选择套餐分类">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
  
        <el-form-item label="套餐价格" prop="price">
          <el-input v-model="ruleForm.price"></el-input>
        </el-form-item>
  
        <el-form-item label="套餐菜品" prop="setmealDishes" style="width: 777px">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="handleAdd"
            >添加菜品</el-button
          >
          <el-table
            v-if="ruleForm.setmealDishes.length"
            :data="ruleForm.setmealDishes"
            style="width: 100%"
          >
            <el-table-column prop="name" label="名称" width="130">
            </el-table-column>
            <el-table-column prop="price" label="价钱" width="130">
            </el-table-column>
            <el-table-column label="份数" width="286.2">
              <template v-slot="{ row }">
                <el-input-number v-model="row.copies" :min="1"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="130">
              <template slot-scope="scope">
                <el-link type="danger" @click="handledel(scope.row)">
                  删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
  
        <el-form-item label="套餐图片" prop="image">
          <el-upload
            class="avatar-uploader"
            :action="`${env}/common/upload`"
            list-type="picture-card"
            :on-success="handleSuccess"
            :limit="1"
            :show-file-list="false"
          >
            <img
              v-if="ruleForm.image"
              :src="`${env}/common/download?name=${ruleForm.image}`"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
  
        <el-form-item label="套餐描述" prop="description">
          <el-input type="textarea" v-model="ruleForm.description"></el-input>
        </el-form-item>
  
        <el-form-item>
          <el-button @click="$router.push({ name: 'Setmenu' })">取消</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </el-form-item>
      </el-form>
  
      <el-dialog title="添加菜品" :visible.sync="dialogTableVisible">
        <div class="menu-transfer">
          <el-menu class="menu-transfer-1">
            <el-menu-item
              :index="item.id"
              v-for="item of menuData"
              :key="item.id"
              @click="handleGetDishListByCategoryId(item)"
            >
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
          <el-transfer
            v-model="transferValueData"
            :data="transferData"
            :titles="['菜品', '已选菜品']"
            :props="{
              key: 'id',
              label: 'name',
            }"
          ></el-transfer>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSure()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import {
    getCategoryName,
    getSetmenuCategoryName,
    getDishListByCategoryIdId,
    addSetmenu,
    editSetmenu,
    getSetmenuById,
  } from "@/api/setmenu";
  export default {
    data() {
      return {
        tableData: [],
        options: [],
        env: process.env.VUE_APP_BASE_API,
        ruleForm: {
          categoryId: "",
          code: "",
          description: "",
          dishList: [],
          idType: "",
          image: "",
          name: "",
          price: "",
          setmealDishes: [],
          status: 1,
        },
        rules: {
          name: [{ required: true, message: "请输入菜品名称", trigger: "blur" }],
          categoryId: [{ required: true, trigger: "blur" }],
          price: [{ required: true, message: "请输入手机号", trigger: "blur" }],
          image: [{ required: true, trigger: "change" }],
        },
        dialogTableVisible: false,
        input: "",
        menuData: [],
        transferData: [],
        transferDataAll: [],
        transferValueData: [],
      };
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        if (this.isEdit) {
          getSetmenuById(this.$route.query.id).then((res) => {
            this.ruleForm = res.data;
          });
        }
        getSetmenuCategoryName().then((res) => {
          this.options = res.data;
        });
      },
      handledel(row) {
        console.log(row);
      },
      handleSave() {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            if (this.isEdit) {
              await editSetmenu(this.ruleForm);
            } else {
              const data = {
                ...this.ruleForm,
                setmealDishes: this.ruleForm.setmealDishes.map((item) => {
                  return {
                    copies: item.copies,
                    dishId: item.id,
                    name: item.name,
                    price: item.price,
                  };
                }),
              };
              await addSetmenu(data);
            }
            this.$message.success("保存成功");
            this.$router.push({ name: "Dishes" });
          } else {
            return false;
          }
        });
      },
      handleSure() {
        this.ruleForm.setmealDishes = this.transferDataAll.filter((item) => {
          return this.transferValueData.includes(item.id);
        });
        this.dialogTableVisible = false;
      },
      handleSuccess(response, file, fileList) {
        this.ruleForm.image = response.data;
      },
      handleGetDishListByCategoryId(item) {
        getDishListByCategoryIdId({ categoryId: item.id }).then((res) => {
          this.transferDataAll = [...this.transferDataAll, ...res.data];
          this.transferData = res.data;
        });
      },
    },
    computed: {
      isEdit() {
        return this.$route.query.isEdit === "true";
      },
    },
  };
  </script>
  <style>
  
  </style>